<template>
	<div class="game-container report-container">
		<el-form
			ref="form"
			:model="form"
			label-suffix=":"
			label-width="120px"
			style="margin-left: 50px;"
		>
			<el-form-item label="所属商户" prop="merchantId">
				<merchant-select
					v-model="form.merchantId"
					v-symbols
					:clearable="false"
					:placeholder="$t('common.choose_merchant')"
					style="width: 270px;"
					@change="handleChangeMerchant"
				></merchant-select>
			</el-form-item>

			<el-form-item
				label="会员账号"
				prop="userName"
				:rules="[
					{
						required: true,
						message: '请输入会员账号',
						trigger: 'blur'
					}
				]"
			>
				<el-input
					v-model="form.userName"
					v-input="{ name: 'noEmpty' }"
					size="medium"
					maxlength="12"
					:placeholder="$t('common.please_enter')"
					clearable
					style="width: 270px;"
					@blur="handleBlurUserName"
				></el-input>
				<span
					v-if="isUserExist === 2"
					style="color: red;margin-left: 15px;"
				>
					会员不存在
				</span>
			</el-form-item>

			<el-form-item label="昵称">
				<el-input
					v-model="form.nickName"
					size="medium"
					:disabled="true"
					style="width: 270px;"
				></el-input>
			</el-form-item>

			<el-form-item label="总代账号">
				<el-input
					v-model="form.topProxyName"
					size="medium"
					:disabled="true"
					style="width: 270px;"
				></el-input>
			</el-form-item>

			<el-form-item label="APP在线状态">
				<el-input
					v-model="onlineStatus"
					size="medium"
					:disabled="true"
					style="width: 270px;"
				></el-input>
				<i
					v-if="onlineLoading"
					class="el-icon-loading custom-icon-loading"
				></i>
				<i
					v-else
					class="el-icon-refresh custom-icon-refresh"
					@click="handlerCheckUserOnline"
				></i>
			</el-form-item>
			<el-form-item
				label="操作备注"
				prop="remark"
				:rules="[
					{
						required: true,
						message: '请输入操作备注',
						trigger: 'blur'
					}
				]"
			>
				<el-input
					v-model="form.remark"
					v-input="{ name: 'noEmpty' }"
					type="textarea"
					show-word-limit
					clearable
					:rows="5"
					maxlength="200"
					:placeholder="$t('common.please_enter')"
					style="width: 270px;"
				></el-input>
			</el-form-item>
			<el-form-item>
				<el-button
					type="primary"
					:disabled="isSubmitDisabled"
					:loading="submitLoading"
					size="medium"
					@click="handleSubmit"
				>
					强制上传日志
				</el-button>
				<el-button
					type="primary"
					:disabled="submitLoading"
					size="medium"
					@click="handleReset"
				>
					{{ $t('common.reset') }}
				</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
import list from '@/mixins/list'
export default {
	mixins: [list],
	data() {
		return {
			submitLoading: false,
			existLoading: false,
			onlineLoading: false,
			isUserExist: 0,
			isUserOnline: 0,
			onlineStatus: '',
			form: {
				merchantId: undefined,
				merchantName: undefined,
				userName: undefined,
				nickName: undefined,
				topProxyName: undefined
			}
		}
	},
	computed: {
		merchantList() {
			return this.$store.getters.merchantList || []
		},
		isSubmitDisabled() {
			return (
				this.isUserExist !== 1 ||
				this.isUserOnline !== 1 ||
				this.submitLoading
			)
		}
	},
	created() {
		this.form.merchantId = this.merchantList[0]?.id
		this.form.merchantName = this.merchantList[0]?.merchantName
	},
	methods: {
		handleChangeMerchant() {
			this.form.merchantName = this.merchantList.find(
				(item) => item.id === this.form.merchantId
			)?.merchantName
			this.handlerCheckUserExist()
		},
		handleBlurUserName() {
			this.handlerCheckUserExist()
		},
		// 检查用户是否存在并获取用户信息
		async handlerCheckUserExist() {
			this.form.topProxyName = undefined
			this.form.nickName = undefined

			this.isUserExist = 0
			this.isUserOnline = 0
			this.onlineStatus = ''

			if (!this.form.userName) {
				return
			}

			const params = {
				merchantId: this.form.merchantId,
				userName: this.form.userName
			}
			this.existLoading = true
			await this.$api
				.checkUserIsExistBend(params)
				.then((res) => {
					this.existLoading = false
					if (res?.data?.userId !== undefined) {
						this.form.userId = res?.data?.userId
						this.form.nickName = res?.data?.nickName
						this.form.topProxyId = res?.data?.topProxyId
						this.form.topProxyName = res?.data?.topProxyName
						this.isUserExist = 1
					} else {
						this.isUserExist = 2
					}
				})
				.catch(() => {
					this.existLoading = false
				})

			// this.isUserOnline = 1
			await this.handlerCheckUserOnline()
		},
		// 查看app在线状态刷新
		async handlerCheckUserOnline() {
			this.isUserOnline = 0
			this.onlineStatus = ''
			// 会员不存在则不刷新
			if (this.isUserExist !== 1) {
				return
			}
			const params = {
				merchantId: this.form.merchantId,
				userName: this.form.userName
			}
			this.onlineLoading = true
			await this.$api
				.checkUserIsOnlineBend(params)
				.then((res) => {
					this.onlineLoading = false
					if (res?.data === true) {
						this.isUserOnline = 1
						this.onlineStatus = 'APP在线'
					} else {
						this.isUserOnline = 2
						this.onlineStatus = 'APP离线'
					}
				})
				.catch(() => {
					this.onlineLoading = false
				})
		},
		// 提交
		async handleSubmit() {
			await this.handlerCheckUserExist()
			this.$refs.form.validate((valid) => {
				if (valid) {
					if (this.isUserExist !== 1) {
						this.$message.closeAll()
						this.$message.warning('会员不存在')
						return
					}
					if (this.isUserOnline !== 1) {
						this.$message.closeAll()
						this.$message.warning('会员APP离线')
						return
					}
					this.submitLoading = true
					const params = { ...this.form }
					this.$api
						.saveUserUploadLogBend(params)
						.then((res) => {
							this.submitLoading = false
							if (res?.code === 200) {
								this.$message.closeAll()
								this.$message.warning(
									'操作成功，日志上传中，请到上传日志记录中查看结果'
								)
								this.handleReset()
							}
						})
						.catch(() => {
							this.submitLoading = false
						})
				}
			})
		},
		// 重置
		handleReset() {
			Object.keys(this.form).forEach((key) => {
				this.form[key] = undefined
			})
			this.$refs.form.clearValidate()
			this.isUserExist = 0
			this.isUserOnline = 0
			this.onlineStatus = ''
			this.form.merchantId = this.merchantList[0]?.id
			this.form.merchantName = this.merchantList[0]?.merchantName
		}
	}
}
</script>

<style lang="scss" scoped>
::v-deep .el-textarea .el-input__count {
	bottom: -10px;
	right: -45px;
}
.custom-icon-loading {
	font-size: 24px;
	margin-left: 20px;
	vertical-align: middle;
}
.custom-icon-refresh {
	cursor: pointer;
	font-size: 24px;
	margin-left: 20px;
	font-weight: 900;
	vertical-align: middle;
}
</style>
